<template>
  <div class="air-footer">
    <el-space id="air-footer-content">
      <!-- 结构化空域相关 -->
      <el-dropdown
        trigger="click"
        popper-class="dropdown-box"
        style="background: transparent"
      >
        <div
          class="icon-box"
          :class="{ 'active-icon': activeIcon == '空域区域' }"
          @click="handelSelectIcon('空域区域')"
        >
          <img src="../assets/images/air-space.svg" alt class="icon" />
          <div>空域区域</div>
          <!-- <div>2</div> -->
        </div>
        <!-- <el-button type="success" circle>
          <template #icon>
            <i class="iconfont icon-kongyu"></i>
          </template>
        </el-button>-->

        <template #dropdown>
          <div class="table">
            <img
              src="../assets/images/table-line-top.svg"
              class="table-line"
              alt=""
            />
            <el-dropdown-menu>
              <el-dropdown-item @click="handleVisible('airSpace')">
                {{ visible.airSpace ? "隐藏空域" : "显示空域" }}
              </el-dropdown-item>
              <el-dropdown-item>
                <el-dropdown>
                  新增空域
                  <template #dropdown>
                    <el-dropdown-menu>
                      <!-- <el-dropdown-item
											@click="handleClick('addAirSpace', 'pin')">图标点</el-dropdown-item>
										<el-dropdown-item
											@click="handleClick('addAirSpace', 'point')">点</el-dropdown-item>
										<el-dropdown-item
                      @click="handleClick('addAirSpace', 'polyline')">线</el-dropdown-item>-->
                      <el-dropdown-item
                        @click="handleClick('addAirSpace', 'polygon')"
                        >多边形</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click="handleClick('addAirSpace', 'rectangle')"
                        >矩形</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click="handleClick('addAirSpace', 'regular')"
                        >正多边形</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click="handleClick('addAirSpace', 'circle')"
                        >圆</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-dropdown-item>
            </el-dropdown-menu>
            <img
              src="../assets/images/table-line-bottom.svg"
              class="table-line-bottom"
              alt=""
            />
          </div>
        </template>
      </el-dropdown>
      <!-- 网格展示相关 -->
      <el-dropdown trigger="click">
        <!-- <el-button type="danger" :icon="Grid" circle />
        -->
        <div
          class="icon-box"
          :class="{ 'active-icon': activeIcon == '空域网格' }"
          @click="handelSelectIcon('空域网格')"
        >
          <img src="../assets/images/air-grid.svg" alt class="icon" />
          <div>空域网格</div>
        </div>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleVisible('noFlyGrid')">
              {{ visible.noFlyGrid ? "隐藏禁飞空域" : "显示禁飞空域" }}
            </el-dropdown-item>
            <el-dropdown-item @click="handleVisible('airGrid')">
              {{ visible.airGrid ? "隐藏空域网格" : "显示空域网格" }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 动态生成航路 -->
      <el-dropdown trigger="click">
        <!-- <el-button type="info" circle>
          <template #icon>
            <i
              class="iconfont icon-a-maproute-outlined"
              style="font-size: 1.4rem"
            ></i>
          </template>
        </el-button>-->
        <div
          class="icon-box"
          :class="{ 'active-icon': activeIcon == '起降点' }"
          @click="handelSelectIcon('起降点')"
        >
          <img src="../assets/images/route-points.svg" alt class="icon" />
          <div>起降点</div>
        </div>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleVisible('routePoints')"
              >起降点管理</el-dropdown-item
            >
            <el-dropdown-item @click="handleVisible('routeGenerate')"
              >生成航路</el-dropdown-item
            >
            <el-dropdown-item @click="handleVisible('routeGrids')">
              {{ visible.routeGrids ? "隐藏航路网格" : "显示航路网格" }}
            </el-dropdown-item>
            <el-dropdown-item @click="handleClick('generateRoute')"
              >航路平滑</el-dropdown-item
            >
            <el-dropdown-item @click="handleVisible('routeList')">
              {{ visible.routeList ? "隐藏航路" : "显示航路" }}
            </el-dropdown-item>
            <el-dropdown-item @click="handleVisible('routePort')">
              {{ visible.routePort ? "隐藏无人机场" : "显示无人机场" }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 手动绘制航路 -->
      <el-dropdown trigger="click">
        <!-- <el-button type="warning" circle>
          <template #icon>
            <i class="iconfont icon-daohang-luxianguanli"></i>
          </template>
        </el-button>-->
        <div
          class="icon-box"
          :class="{ 'active-icon': activeIcon == '航空路线' }"
          @click="handelSelectIcon('航空路线')"
        >
          <img src="../assets/images/air-route.svg" alt class="icon" />
          <div>航空路线</div>
        </div>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleVisible('airRoute')">
              {{ visible.airRoute ? "隐藏航路" : "显示航路" }}
            </el-dropdown-item>
            <el-dropdown-item @click="handleClick('addAirRoute')"
              >绘制航路航线</el-dropdown-item
            >
            <el-dropdown-item @click="handleVisible('airLine')">
              {{ visible.airLine ? "隐藏航线" : "显示航线" }}
            </el-dropdown-item>
            <el-dropdown-item @click="handleVisible('airPort')">
              {{ visible.airPort ? "隐藏无人机场" : "显示无人机场" }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 信息统计相关 -->
      <el-dropdown trigger="click">
        <!-- <el-button type="primary" circle>
          <template #icon>
            <i class="iconfont icon-tongji"></i>
          </template>
        </el-button>-->
        <div
          class="icon-box"
          :class="{ 'active-icon': activeIcon == '数据展示' }"
          @click="handelSelectIcon('数据展示')"
        >
          <img src="../assets/images/data-table.svg" alt class="icon" />
          <div>数据展示</div>
        </div>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleVisible('statLeft')">
              {{ visible.statLeft ? "隐藏左侧图表" : "显示左侧图表" }}
            </el-dropdown-item>
            <el-dropdown-item @click="handleVisible('statRight')">
              {{ visible.statRight ? "隐藏右侧图表" : "显示右侧图表" }}
            </el-dropdown-item>
            <el-dropdown-item @click="handleVisible('infoTable')">
              {{ visible.noFlyGrid ? "隐藏全部数据" : "显示全部数据" }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 表格信息展示 -->
      <!-- <el-dropdown>
        <el-button circle>
          <template #icon>
            <i class="iconfont icon-table"></i>
          </template>                                                                                                                                                                                                                                            
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleVisible('infoTable')">{{
              visible.noFlyGrid ? "隐藏信息统计表" : "显示信息统计表"
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>-->
    </el-space>
  </div>
</template>

<script setup>
import { toRefs, ref, onMounted, onUnmounted } from "vue";
import {
  Histogram,
  Operation,
  Grid,
  DataLine,
  MagicStick,
  PieChart,
} from "@element-plus/icons-vue";

const emits = defineEmits(["change"]);

const props = defineProps({
  visible: Object,
});

const { visible } = toRefs(props);

const activeIcon = ref();

const handleClick = (key, type) => {
  emits("click", key, type);
  console.log();
};

const handleVisible = (key) => {
  emits("change", key);
  activeIcon.value = null;
};

const handelSelectIcon = (key) => {
  activeIcon.value = key;
};

const handleClickOutside = function (e) {
  const iconBoxDoms = document.querySelectorAll(".icon-box");

  // 是否点击icon以外的区域
  const isOutsidIcon = Array.from(iconBoxDoms)?.every((dom) => {
    return !dom?.contains(e.target);
  });

  if (isOutsidIcon) {
    activeIcon.value = null;
  }
};

onMounted(() => {
  document.addEventListener("click", handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});
</script>

<style scoped lang="scss">
.air-footer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  width: 100%;
  height: 110px;
  text-align: center;
  z-index: 1;
  background: url("@/assets/images/footer-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  .icon-box {
    font-family: Source Han Sans CN;
    color: #94ceff;
    font-size: 16px;
    margin-bottom: 10px;
    .icon {
      width: 72px;
      height: 72px;
    }
  }

  .icon-box:hover,
  // .icon-box:focus,
  .active-icon {
    font-family: Source Han Sans CN;
    color: rgba(0, 252, 255, 1);
    font-size: 16px;
    margin-bottom: 40px;
    .icon {
      width: 100px;
      height: 100px;
    }
  }

  .el-space {
    width: 35%;
    display: flex;
    justify-content: space-between;
  }
}
/* 去除dropdown黑框 */
.el-tooltip__trigger:focus {
  outline: none;
}

.air-space-table {
  position: absolute;
  bottom: 5%;
  right: 5%;
  // background-color: red !important;
  width: 200px;
  height: 200px;
}

// ::v-deep .el-dropdown-menu {
//   // inset: auto auto 63px 94% !important;
//   background-color: red !important;
//   --el-bg-color-overlay: red !important;
// }

::v-deep .el-popper__arrow:before {
  opacity: 0 !important;
}

.table {
  width: 88px;
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(8, 40, 75, 0.45) 0%,
    rgba(10, 41, 73, 0.45) 15.35%,
    rgba(11, 70, 146, 0.45) 35.16%,
    rgba(11, 78, 167, 0.45) 62.46%,
    rgba(11, 30, 60, 0.45) 83.98%,
    rgba(13, 33, 58, 0.45) 100%
  ) !important;
  .table-line {
    z-index: 11;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .table-line-bottom {
    z-index: 11;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .el-dropdown-menu {
    background-color: transparent;
  }
}

.dropdown-box {
  border: 0 !important;
  background: transparent !important;
}
</style>
